<div class="container">
    <div id="weather">
        <table id="weather-table" class="layui-table"></table>
    </div>
</div>

<script>
    $.get("api/getWeather",{},function(data){
        var ip = data.ip;
        var city = data.weather.city;
        var weather = data.weather;
        var innerHtml = "<tr><td colspan='3'>城市:</td><td colspan='3'>"+city+"</td><td colspan='3'>IP:</td><td colspan='3'>"+ip+"</td></tr>";
        innerHtml+="<tr><td>温度:</td><td>"+weather.wendu+"</td><td>风力</td><td>"+weather.fengli+
            "</td><td>湿度:</td><td>"+weather.shidu+"</td><td>风向:</td><td>"+weather.fengxiang+
            "</td><td>日出:</td><td>"+weather.sunrise_1+"</td><td>日落:</td><td>"+weather.sunset_1+"</td></tr>";
        var env = weather.environment;
        innerHtml+="<tr><td colspan='2'>空气质量指数</td><td>"+env.aqi+"</td><td colspan='2'>细颗粒物</td><td>"+env.pm25+
            "</td><td>质量状况</td><td>"+env.quality+"</td><td>建议</td><td colspan='3'>"+env.suggest+"</td></tr>";
        var zhishu = weather.zhishus.zhishu;
        var length = zhishu.length;
        innerHtml+="<tr><td colspan='12'>指数</td></tr>";
        for(var i = 0;i<length;++i) {
            var data = zhishu[i];
            innerHtml+="<tr><td colspan='2'>"+data.name+"</td><td colspan='2'>"+data.value+"</td><td colspan='8'>"+data.detail+"</td><tr>"
        }
        innerHtml+="<tr><td colspan='12'>近五天天气状况</td></tr>";
        var forcast = weather.forecast.weather;
        length = forcast.length;
        for (var i =0;i<length;++i)
        {
            var data = forcast[i];
            innerHtml+="<tr><td colspan='2'>"+data.date+"</td><td colspan='2'>"+data.high+"</td><td colspan='2'>"+data.low+"" +
                "</td><td colspan='3'>白天:"+data.day.type+";"+data.day.fengxiang+";"+data.day.fengli+
                "</td><td colspan='3'>夜间:"+data.night.type+";"+data.night.fengxiang+";"+data.night.fengli+"</td></tr>";
        }
        $('#weather-table').html(innerHtml);
    });
</script>